<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
	</head>
	<body>
		<table class="layui-hide" id="test" lay-filter="demo">
		</table>
		<!-- 操作模块 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script src="../lib/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.use(['table', 'layer'], function() {
				var table = layui.table;
				var layer = layui.layer;
				//获取token
				var token = localStorage.getItem('token');
				ajax({
					type: 'get',
					url: 'http://api-breakingnews-web.itheima.net/my/article/list',
					token: token,
					data: {
						state: '',
						cate_id: '',
						pagenum: 1,
						pagesize: 2100
					},
					success: function(res) {
						if (res.status == 0) {
							let dataList = {};
							// 把所属类别添加到本地
							table.render({
								elem: '#test',
								data: res.data,
								page: true,
								limit: 1,
								limits: [1, 3, 5, 7, 10],
								cols: [
									[{
											field: 'Id',
											title: 'ID',
											sort: true
										},
										{
											field: 'title',
											title: '标题'
										},
										{
											field: 'pub_date',
											title: '发布时间',
											sort: true
										},
										{
											field: 'state',
											title: '状态'
										},
										{
											field: 'cate_name',
											title: '所属分类名称'
										}, //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
										{
											field: '',
											title: '操作',
											toolbar: '#barDemo'
										}
									]
								]
							})
						} else {
							alert(res.message)
						}
					}
				})
				//监听工具条
				table.on('tool(demo)', function(obj) {
					var data = obj.data;
					//obj下有一个event就是按钮自定义的事件
					if (obj.event === 'detail') {
						layer.msg('ID：' + data.id + ' 的查看操作');
					} else if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							console.log(data.id);
							//删除数据
							ajax({
								type: 'get',
								url: 'http://api-breakingnews-web.itheima.net/my/article/delete/' +
									obj.data.Id,
								token: token,
								success: function(res) {
									if (res.status == 0) {
										layer.msg(res.message)
									} else {
										layer.msg(res.message)
									}
								}
							})
							obj.del();
							layer.close(index);
						});
					} else if (obj.event === 'edit') {
						//获取父亲Dom
						var edits=window.parent.document.querySelector('#edit-hub');
						var _iframe =window.parent.document.getElementById('iframeId').contentWindow;
						// var titles=_iframe.document.getElementById('title');​​​​​​​
						console.log(titles);
						// 传参
						titles.value=obj.data.title
						edits.click();
					}
				});
			});
		</script>
	</body>
</html>
